<template>
<div class="">
  <Row>
        <Col span="12" class="title clearfix">客户基础资料</Col>
   </Row>
    <div class="line"></div>
   	<div class="MainBox">
	   	<Form :model="BassMessageForm" ref="bassMessageValidate" label-position="left" :label-width="50" :rules="rulesValidate">


	        <Form-item label="姓名" prop="name">
	            <Input v-model="BassMessageForm.name"></Input>
	        </Form-item>
	       <!--  <Form-item label="年龄">
	            <Input v-model="BassMessageForm.age"></Input>
	        </Form-item> -->
	        <Form-item label="年龄" >
            <Row>
           		 <Col span="11">
               <Form-item >
                    <Date-picker type="date" placeholder="请输入出生日期" v-model="BassMessageForm.born"></Date-picker>
              </Form-item>
                </Col>

                <Col span="2" style="text-align: center">-</Col>
                 <Col span="11">

                    <Input v-model="BassMessageForm.age" disabled></Input>

                </Col>

            </Row>
        </Form-item>

        <!--  <Form-item label="配偶姓名" prop="spouseName">
	            <Input v-model="BassMessageForm.spouseName"></Input>
	        </Form-item> -->

        <Form-item label="配偶年龄" >

        	<Row>
           		 <Col span="11">
                 <Form-item >
                    <Date-picker type="date" placeholder="请输入出生日期" v-model="BassMessageForm.spouseBorn"></Date-picker>
                   </Form-item>
                </Col>

                <Col span="2" style="text-align: center">-</Col>
                 <Col span="11">
           		   <Input v-model="BassMessageForm.spouseAge" disabled></Input>

                </Col>

            </Row>



        </Form-item>



        <Form-item label="电话号码" prop="iphone">
            <Input v-model="BassMessageForm.iphone"></Input>
        </Form-item>

        <Form-item label="所属省市" prop="city">
        	<Row>
	            <Col span="14"> <Input v-model="BassMessageForm.city" disabled></Input></Col>
	            <Col span="2" style="text-align: center">-</Col>
	           	<Col span="6"> <Button type="ghost" v-on:click="selectCity">点击选择</Button></Col>
	           	<Modal v-model="visible" title="请选择省市"><v-distpicker type="mobile" static-placeholder @selected="onSelected"></v-distpicker>
		           	<div slot="footer">
			            <Button type="error" size="large"  v-on:click="cancelSelectCity">取消</Button>
			        </div>
   				 </Modal>
            </Row>
        </Form-item>
        <!-- <Form-item label="备注">
        	<Input v-model="BassMessageForm.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
        </Form-item> -->

        <Form-item style="padding-top:10px">
          <Button  class="buttonStyle pinkButton" @click="submit" >提交</Button>
          <Button type="ghost" class="buttonStyle" @click="cancel" >退出</Button>

        </Form-item>
        <div style="margin-bottom:10px">乐生医疗郑重承诺，保护客户隐私！在未经客户允许的情况下，
		不会泄露客户所提供的任何资料，仅供医疗参考使用。


		</div>

	    </Form>
	</div>
   	 <!-- <Col span='12'><v-distpicker type="mobile" static-placeholder></v-distpicker></Col> -->

</div>

</template>
<script>
// const BASEMESSAGE_KEY = 'BASEMESSAGE_KEY'
import VDistpicker from 'v-distpicker'
import SubmitButton  from "../components/SubmitButton"
import Store from '../store'
import api from '../js/axios-module'
import vuex_store from '../js/vuex-store'
import {mapState} from 'vuex';
export default {

  data () {
    return {
    	 visible:false,
    	  born:'',
      
        BassMessageForm:{
          // name: '',
          // spouseName:'',
          // age: '',
          // spouseAge: '',
          // iphone: '',
          // city: '',
          // born:'',
          // spouseBorn:'',
        },
        rulesValidate:{
          mark: [

                ],
          name: [
                  { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
          iphone:[
                    { required: true, message: '手机号码不能为空', trigger: 'blur' }
                  ],
          spouseName: [
                      { required: true, message: '配偶姓名不能为空', trigger: 'blur' }
                    ],
         
          city: [
                      { required: true, message: '城市不能为空', trigger: 'blur' }
                    ]



        }
    }
  },
  created: function () {
  // console.log(baseURL)
    //初始化
       // this.BassMessageForm = Store.fetch(Store.BASEMESSAGE_KEY)
  },
  store:vuex_store,
	components: { SubmitButton,VDistpicker },
	methods: {
    getData: function () {
      api.getBaseMessage({},"get").then(response => {
        console.log(response.data)
        var model = new Object();
        model.name = response.data.data.name;
        model.born = response.data.data.birthday;
        model.spouseBorn =response.data.data.husbandbirthday
        model.iphone = response.data.data.mobile;
        model.city = response.data.data.province+" - "+response.data.data.city
        this.BassMessageForm = model;


      },err=>{
        // this.$Message.error('获取数据失败,请稍后再试');
      })

    },
    submit:function(){

      // Store.save(this.BassMessageForm,Store.BASEMESSAGE_KEY);
       this.$refs["bassMessageValidate"].validate((valid) => {
          if (valid) {
            var item = new Object();
            item.username = this.BassMessageForm.name;
            item.userphone = this.BassMessageForm.iphone;
            item.userbirthday = this.BassMessageForm.born;
            item.userhusbandbirthday = this.BassMessageForm.spouseBorn;
            var arr = this.BassMessageForm.city.split(" - ");
            item.userprovince = arr[0];
            item.usercity = arr[1];
            console.log(item)

            api.editBaseMessage(item).then(response=>{
                if(response.data.code ==200){
                  this.$Message.success('提交成功!');
                }
            },err=>{
               this.$Message.error('提交失败!');
            })

            

          } else {
              this.$Message.error('表单验证失败!');
          }
      })



    },
    cancel:function(){

      window.localStorage.setItem("userToken","")
      window.localStorage.setItem("auth","")
      this.$store.commit("setAuth","")
      this.$store.commit("setUserToken","")


      window.location.href= '/#/Login'
      this.$Message.error("退出成功");
    },
		//选中城市
	    selectCity:function(){

	    	this.visible = true
	    },
	    cancelSelectCity:function(){
    		this.visible = false
    	},
    	onSelected:function(data) {
	    	this.visible = false
        this.province = data.province.value ;
        this.city = data.city.value
		    this.BassMessageForm.city = data.province.value + ' - ' + data.city.value + ' - '+data.area.value
    	},
    	//计算年龄:根据当前时间修改年龄
    	getAge:function(selDate){

    		if (selDate instanceof Date) {
					var nowDate = new Date();
          var age =  nowDate.getYear() - selDate.getYear()
          
					return  age + " 岁";
					// this.BassMessageForm.age = div;
	 			}
    	}

	},watch:{
		'BassMessageForm.born':{
			handler:function(val,oldval){
					//根据当前时间修改年龄

		 			this.BassMessageForm.age = this.getAge(new Date(val));

			},
			deep:true
		},
   'BassMessageForm.spouseBorn':{
     handler:function(val,oldval){
         //根据当前时间修改年龄
         this.BassMessageForm.spouseAge = this.getAge(new Date(val));

     },
     deep:true
   }


	},
  mounted: function () {
    this.getData()
  },
  computed: mapState({
        token: function(state){//箭头函数会有this的问题

         let localData = window.localStorage.getItem('userToken')

          if(state.token===""&&localData){

            

          }
          return state.token
        }
    })


}
</script>

<style scoped>


</style>
